<template>
  <div class="wrap" v-if="show" @touchmove.prevent @click="close">
    <div class="block" @click.stop>
      <div class="title">卡券派送</div>
      <div class="min-title">天天送好礼</div>
      <div class="sale-list">
        <div class="rolling-height">
          <div v-for="item,index in list">
            <div class="goods" v-if="item.type !='card'">
              <div class="left" style="border:solid 1px #efefef">
                <img style="width: 100%; height: auto ; max-height: 60px;" :src="item.content.image_list ? item.content.image_list[0] : ''"/>
              </div>
              <div class="right">
                <div class="goods-info">
                  <div class="name">
                    {{item.content.name}}
                  </div>
                  <div class="desc">
                    {{item.content.abstract}}
                  </div>
                  <div class="price">
                    <div class="price-now">￥{{ item.content.discount_price }}</div>
                    <div class="price-old"><span class="delete-line">￥{{ item.content.price}}</span></div>
                  </div>
                </div>
                <div class="btn-action" @click.stop="buy">
                  <div class="btn-buy">
                    去购买
                  </div>
                </div>
              </div>
            </div>
            <div class="coupon" v-else>
                <div class="left" style="">
                  <img style="width: 100%; height: auto; max-height: 60px;" src="@/static/cardIcon.png"/>
                </div>
                <div class="right">
                  <div class="coupon-info">
                    <div class="name">
                        {{item.content.title}}
                    </div>
                    <div class="desc">
                        {{item.content.abstract}}
                    </div>
                  </div>
                  <div class="btn-action">
                    <div class="btn-use" @click.stop="use">
                      去领取
                    </div>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="close">
        <div class="close-btn">
            X
        </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: [Boolean],
      default:false
    },
    list: {
      type: [Array],
      default:() =>{
        return []
      }
    }
  },
  data() {
    return {};
  },
  mounted() {
    console.log("领取卡券弹窗显示状态",this.list)  
  },
  methods: {
    close() {
      console.log('关闭弹窗');
      // this.$emit('update:show', false);
    },
    get() {
      console.log('领取');
      // this.$emit('update:show', false);
    },
    use() {
      console.log('去使用');
      // uni.navigateTo({
      //   url:'/pages/coupon/index'
      // })
      // this.$emit('update:show', false);
    },
    buy() {
      console.log('去购买');
      // this.$emit('update:show', false);
    }
  }
};
</script>

<style lang="less" scoped>
    .u-ava{
        margin-top: 8px;
    }
.wrap {
  position: absolute;
  z-index: 999;
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  -webkit-animation: fadeleftIn 0.4s;
  animation: fadeleftIn 0.4s;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  .block {
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
    /*height: 720px;*/
    border-radius: 2px;
    background: #d75151;
    align-items: center;
    -webkit-animation: fadeleftIn 0.4s;
    animation: fadeleftIn 0.4s;
    -webkit-animation-name: popIn;
    animation-name: popIn;
    .title{
      text-align: center;
      color: #fff;
      font-size: 20px;
      font-weight: 600;
    }
    .min-title{
      font-size: 14px;
      text-align: center;
      color: #fff;
      position: relative;
      height: 20px;
    }
    .min-title::after{
      content: "";
      width: 40px;
      height: 5px;
      border-bottom: 1px solid #fff;
      position: absolute;
      left: 0;
      top: 5px;
      margin-left: 50px;
    }
    .min-title::before{
      content: "";
      width: 40px;
      height: 5px;
      border-bottom: 1px solid #fff;
      position: absolute;
      right: 0;
      top: 5px;
      margin-right: 50px;
    }
    .sale-list{
      border-radius: 2px;
        .rolling-height{
          height: 250px;
          overflow: hidden;
          overflow-y: auto;
        }
        .coupon{
            display: flex;
            border-radius: 5px;
            background: #fff;
            padding: 5px;
            margin-top: 10px;
            .left{
                width: 60px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                border:solid 1px #efefef;
                min-height: 60px;
            }
            .right{
                flex: 1;
                padding-left: 10px;
                display: flex;
                .coupon-info{
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  .name{
                      font-size: 14px;
                      font-weight: 400;
                  }
                  .desc{
                    font-size: 12px;
                    color: #b6b6b6;
                  }
                }
                .btn-action{
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  .btn-use{
                    width: 60px;
                    height: 25px;
                    background: #d75151;
                    color: #fff;
                    text-align: center;
                    border-radius: 15px;
                    line-height: 25px;
                  }
                }
            }
        }
        .goods{
          display: flex;
          border-radius: 5px;
          background: #fff;
          padding: 5px;
          margin-top: 10px;
          .left{
              width: 60px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              border:solid 1px #efefef;
              min-height: 60px;
          }
          .right{
              flex: 1;
              padding-left: 10px;
              display: flex;
              .goods-info{
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                .name{
                    font-size: 14px;
                    font-weight: 400;
                }
                .desc{
                  font-size: 12px;
                  color: #b6b6b6;
                }
                .price{
                  display: flex;
                  .price-now{
                    width: 40px;
                    color: #d75151;
                  }
                  .price-old{
                    flex: 1;
                    .delete-line{
                      text-decoration:line-through;
                      // color: #d75151;
                    }
                  }
                }
              }
              .btn-action{
                display: flex;
                flex-direction: column;
                justify-content: center;
                .btn-buy{
                  width: 60px;
                  height: 20px;
                  background: #da98af;
                  color: #fff;
                  text-align: center;
                  border-radius: 15px;
                  line-height: 20px;
                }
              }
          }
        }
    }
    .action{
      .btn{
        margin-left: 100px;
        margin-right: 100px;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
        background: #d75151;
        color: #fff;
        text-align: center;
        border-radius: 2px;
      }
    }
  }
  .close{
      margin-top: 50px;
      display:flex;
      justify-content: center;
      .close-btn{
          text-align: center;
          width: 30px;
          height: 30px;
          border: 2px solid #fff;
          color: #fff;
          border-radius: 50%;
          line-height: 22px;
          font-weight: 600;
      }
  }
}


@-webkit-keyframes popIn {
  0% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0.5, 0.5, 0.5);
    opacity: 0;
  }
  50% {
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

</style>
